.clock {
  margin: 40px;
  position: relative;
  width: 300px;
  height: 300px;
}

.clock-bg {
  border: 4px solid #aaa;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
}

.clock-bg > div {
  height: 96%;
  width: 4px;
  background-color: #aaa;
  position: absolute;
  top: 2%;
  left: 50%;
  margin-left: -2px;
}

.clock-bg > div:nth-child(2) {
  transform: rotate(30deg);
}
.clock-bg > div:nth-child(3) {
  transform: rotate(60deg);
}
.clock-bg > div:nth-child(4) {
  transform: rotate(90deg);
}
.clock-bg > div:nth-child(5) {
  transform: rotate(120deg);
}
.clock-bg > div:nth-child(6) {
  transform: rotate(150deg);
}

.clock-bg:after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #fff;
  border-radius: 50%;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clock-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.clock-point {
  height: 50%;
  width: 4px;
  position: absolute;
  background-color: #000;
  left: 50%;
  bottom: 50%;
  transform-origin: 50% bottom;
}

.clock-point.clock-point--hour {
  height: 20%;
}

.clock-point.clock-point--minute {
  height: 30%;
}

.clock-point.clock-point--second {
  height: 40%;
}